<template>
  <div class="pagination" role="group" aria-label="分页">
    <a href="#"  v-bind:disabled="page === 1" v-on:click="selectPage(1)">
      首页
    </a>
    <a href="#"  v-bind:disabled="page === 1" v-on:click="selectPage(page - 1)">
      上一页
    </a>
    <a href="#" v-for="p in pages" v-bind:id="'page-' + p" type="button"
            v-bind:class="{'active':page == p}"  v-on:click="selectPage(p)">
      {{p}}
    </a>
    <a href="#"  v-bind:disabled="page === pageTotal" v-on:click="selectPage(page + 1)">
      下一页
    </a>
    <a href="#"  v-bind:disabled="page === pageTotal" v-on:click="selectPage(pageTotal)">
      尾页
    </a>
  </div>
</template>

<script>
  export default {
    name: 'pagination',
    props: {
      list: {
        type: Function,
        default: null
      },
      itemCount: Number // 显示的页码数，比如总共有100页，只显示10页，其它用省略号表示
    },
    data: function () {
      return {
        total: 0, // 总行数
        size: 10, // 每页条数
        page: 0, // 当前页码
        pageTotal: 0, // 总页数
        pages: [], // 显示的页码数组
      }
    },
    methods: {
      /**
       * 渲染分页组件
       * @param page
       * @param total
       */
      render(page, total) {
        let _this = this;
        _this.page = page;
        _this.total = total;
        _this.pageTotal = Math.ceil(total / _this.size);
        _this.pages = _this.getPageItems(_this.pageTotal, page, _this.itemCount || 10);
      },

      /**
       * 查询某一页
       * @param page
       */
      selectPage(page) {
        let _this = this;
        if (page < 1) {
          page = 1;
        }
        if (page > _this.pageTotal) {
          page = _this.pageTotal;
        }
        if (this.page !== page) {
          _this.page = page;
          if (_this.list) {
            _this.list(page);
          }
        }
      },

      /**
       * 当前要显示在页面上的页码
       * @param total
       * @param current
       * @param length
       * @returns {Array}
       */
      getPageItems(total, current, length) {
        let items = [];
        if (length >= total) {
          for (let i = 1; i <= total; i++) {
            items.push(i);
          }
        } else {
          let base = 0;
          // 前移
          if (current - 0 > Math.floor((length - 1) / 2)) {
            // 后移
            base = Math.min(total, current - 0 + Math.ceil((length - 1) / 2)) - length;
          }
          for (let i = 1; i <= length; i++) {
            items.push(base + i);
          }
        }
        return items;
      }
    }
  }
</script>

<style scoped>
  .pagination {
    vertical-align: middle !important;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
  }
  .pagination button{
    margin-right: 0.5rem;
  }

  .pagination a {
    display: inline-block;
    margin: 0 12px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #4d555d;
    text-align: center;
    border-radius: 50%;
    -webkit-transition: border-color .2s;
    -moz-transition: border-color .2s;
    transition: border-color .2s;
    text-decoration: none;
  }

   /***悬浮**/
  .pagination a:hover{
    outline: 0;
    background-color: #d9dde1 ;
  }

  /***激活**/
  .pagination a.active {
    background: #4d555d;
    color: #fff;
  }

  /****上一页和下一页***/
  .pagination a:nth-child(2) {
    width: auto;
  }
  .pagination a:nth-last-child(2) {
    width: auto;
  }

  /**首页和上一页的css**/
  .pagination a:nth-child(1):hover{
    outline: 0;
    cursor: pointer !important;
    background-color: transparent;
  }
  .pagination a:nth-child(2):hover{
    outline: 0;
    cursor: pointer !important;
    background-color: transparent;
  }

  /**下一页和尾页的css**/
  .pagination a:nth-last-child(1):hover{
    outline: 0;
    cursor: pointer !important;
    background-color: transparent;
  }
  .pagination a:nth-last-child(2):hover{
    outline: 0;
    cursor: pointer !important;
    background-color: transparent;
  }
</style>
